<template>
  <div class="rating_page">
    <head-top head-title="兑换会员" :go-back='true'></head-top>
    <p class="buy_for">成功兑换后将关联到当前帐号： <span>{{userInfo.username}}</span></p>
    <section class="form">
      <yd-cell-group>
        <yd-cell-item>
          <yd-input  slot="right" required  maxlength="10" regex="^\d{10}$" v-model="cartNumber"  placeholder="请输入10位卡号"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
           <yd-input  slot="right" type="password" regex="^\d{6}$" v-model="passWord" placeholder="请输入6位卡密"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      <div class="btn" @click.stop="paycomfirm">
        <button  class="yd-btn-block" :class="[!canPay ? 'yd-btn-disabled':'yd-btn-primary']">兑换</button>
      </div>
      <footer class="Binding">
        <h3>——温馨提示——</h3>
        <p>新兑换的会员服务，权益以「会员说明」为准。</p>
        <p>月卡：<b>30次</b>减免配送费。</p>
        <p>季卡：<b>90次</b>减免配送费。</p>
        <p>年卡：<b>360</b>次减免配送费。</p>
        <p>＊仅限蜂鸟专送订单，每日最多减免3单，每单最高减免4元（一个月按31天计算）</p>
      </footer>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  import {mapGetters} from 'vuex'
  import {vipCart} from 'src/service/getData'
  export default {
    data(){
      return{
        cartNumber: null,
        passWord: null,
      }
    },
    components:{
      headTop
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ]),
      canPay(){
        return (/^\d{10}$/.test(this.cartNumber))&&(/^\d{6}$/.test(this.passWord)) ;
      }
    },
    methods:{
      async paycomfirm(){
        if(this.canPay){
          let res = await vipCart(this.userInfo.id, this.cartNumber, this.passWord);
          if(res.status===0){
            this.$dialog.toast({
              mes: res.message,
              timeout: 1500,
              icon: 'error'
            });
          }else{
            this.$dialog.toast({
              mes: res.name,
              timeout: 1500,
              icon: 'success'
            });
          }
        }else{
          this.$dialog.alert({mes:'请填写正确的信息！'})
        }
      }
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../../src/style/mixin';
  .rating_page{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;

    background:#f2f2f2;
    padding:2.5rem 0.5rem ;
  }
  .buy_for{
    @include sc(.6rem, #666);
    line-height: 2rem;
    span{
      font-weight: bold;
    }
  }
  .Binding{
    margin-top: 1rem;
    h3{
      text-align: center;
      font-weight: normal;
      @include sc(.65rem, $lightGrey);
      margin-bottom: .6rem;
    }
    p, b{
      @include sc(.5rem, $lightGrey);
      line-height: .8rem;
    }
    p{
      padding-left: 2rem;
    }
  }
</style>
